<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="4" :sm="6">
            <a-form-item label="社团名称" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
              <j-input placeholder v-model="queryParam.communityName"></j-input>
            </a-form-item>
          </a-col>
          <!-- 字典表查询 -->
          <a-col :md="4" :sm="6">
            <a-form-item label="组织类型">
              <j-dict-select-tag
                v-model="queryParam.organizationType"
                placeholder="请选择组织类型"
                dictCode="organizational_nature"
              />
            </a-form-item>
          </a-col>
          <!-- 字典表查询 -->
          <a-col :md="4" :sm="6">
            <a-form-item label="认证状态">
              <j-dict-select-tag
                v-model="queryParam.type"
                placeholder="请选择状态"
                dictCode="club_status"
              />
            </a-form-item>
          </a-col>
          <!-- 字典表查询 -->
          <a-col :md="4" :sm="6">
            <a-form-item label="审核">
              <j-dict-select-tag
                v-model="queryParam.audit"
                placeholder="请选择审核状态"
                dictCode="club_audit"
              ></j-dict-select-tag>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-button type="primary" @click="searchQuery" icon="search" style="margin-left: 21px">查询</a-button>
            <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <!-- <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button> -->
      
      <!-- <a-button type="primary" icon="download" @click="handleExportXls('社团管理表')">导出</a-button>
      <a-upload
        name="file"
        :showUploadList="false"
        :multiple="false"
        :headers="tokenHeader"
        :action="importExcelUrl"
        @change="handleImportExcel"
      >
        <a-button type="primary" icon="import">导入</a-button>
      </a-upload>-->
      <!-- <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="batchDel">
            <a-icon type="delete" />删除
          </a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px">
          批量操作
          <a-icon type="down" />
        </a-button>
      </a-dropdown>-->
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择
        <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>

      <a-table
        ref="table"
        size="middle"
        :scroll="{x:true}"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        class="j-table-force-nowrap"
        @change="handleTableChange"
      >
      
      <template slot="piclot" slot-scope="text, record">
        <div v-for="item in record.communityPicture.split(',')" v-if="record.communityPicture">
          <viewer>
            <img  :src="item" width="200" height="140" />
          </viewer>
        </div >
      </template>
      
        <!-- <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
          <img v-else :src="getImgView(text)" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
          <a-button
            v-else
            :ghost="true"
            type="primary"
            icon="download"
            size="small"
            @click="downloadFile(text)">
            下载
          </a-button>
        </template>-->
        <template slot="avatarslot" slot-scope="text, record">
          <div class="anty-img-wrap">
            <a-avatar shape="square" :src="getAvatarView(record.communityLogo)" icon="logo" />
          </div>
        </template>
        <!-- <template slot="avatarslot" slot-scope="text, record">
          <div class="anty-img-wrap">
            <a-avatar shape="square" :src="getAvatarView(record.communityPicture)" icon="logo" />
          </div>
        </template>-->

        <span slot="action" slot-scope="text, record">
          
          
          
          <a @click="handleEdit(record)">编辑</a>
          <span  v-if="record.audit == 1 ">
            <a-divider type="vertical" />
            <a-dropdown>
              <a class="ant-dropdown-link">创建申请<a-icon type="down" /></a>
              <a-menu slot="overlay">
                <a-menu-item>
                  <a @click="complaintsPass(record)">通过</a>
                </a-menu-item>
                <a-menu-item>
                  <a @click="complaintsNPass(record)">不通过</a>
                </a-menu-item>
              </a-menu>
            </a-dropdown>
          </span>
          
          <a-dropdown>
            
            <a class="ant-dropdown-link">
              <a-divider type="vertical" />
              更多
              <a-icon type="down" />
            </a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a @click="getClubInfo(record.id)">详情</a>
              </a-menu-item>
              <a-menu-item>
                
              </a-menu-item>
              <a-menu-item>
                <!-- <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                  <a>删除</a>
                </a-popconfirm>-->
                <a-popconfirm title="确定删除吗?" @confirm="() => batchDels(record.id)">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
      </a-table>
    </div>
    <community-management-modal ref="modalForm" @ok="modalFormOk"></community-management-modal>
    
    <a-modal v-model="clubInfoVisible" title="社团详情" @ok="handleOk">
          <p>社团名称: &nbsp;{{clubInfo.communityName}}</p>
          <p>社团头像: &nbsp; 
            <a-avatar shape="square" :src="this.clubInfo.communityLogo" icon="logo" />
          </p>
          <p>社团等级: &nbsp; {{clubInfo.level}}</p>
          <p>社团简介: &nbsp; {{clubInfo.introduction}} </p>
          <p>组织类型: &nbsp; {{clubInfo.organizationTypeName}}</p>
          <p>组织级别: &nbsp; {{clubInfo.organizationLevelName}}</p>
          <p>社团证书图片: &nbsp;
              <viewer>
                <img  :src="clubInfo.communityPicture" width="200" height="140" />
              </viewer>
          </p>
          <p>社团群号: &nbsp; {{clubInfo.communityNum}}</p>
            <div v-if="clubInfo.type == '1'">状态: &nbsp; 未认证</div>
            <div v-else-if="clubInfo.type == '2'">状态: &nbsp; 已认证</div>
          <p>创建人头像: &nbsp; <a-avatar shape="square" :src="this.clubInfo.createUserAvatar" icon="logo" /></p>
          <p>创建人姓名: &nbsp; {{clubInfo.createUserName}}</p>
          <p>所属学校: &nbsp; {{clubInfo.createUserSchool}}</p>
          <p>社团人数: &nbsp; {{clubInfo.numOfMembers}}</p>
          
    </a-modal>
    
  </a-card>
</template>

<script>
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { putAction, getFileAccessHttpUrl, getAction, postAction } from '@/api/manage'
import CommunityManagementModal from './modules/CommunityManagementModal'
import JInput from '@comp/jeecg/JInput'

export default {
  name: 'CommunityManagementList',
  mixins: [JeecgListMixin, mixinDevice],
  components: {
    CommunityManagementModal,
    JInput,
  },
  data() {
    return {
      clubInfoVisible: false,
      clubInfo:{},
      description: '社团管理表管理页面',
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '社团头像',
          align: 'center',
          dataIndex: 'communityLogo',
          width: 120,
          scopedSlots: { customRender: 'avatarslot' },
        },
        {
          title: '社团名称',
          align: 'center',
          dataIndex: 'communityName',
        },

        {
          title: '社团简介',
          align: 'center',
          dataIndex: 'introduction',
        },
        {
          title: '组织类型',
          align: 'center',
          dataIndex: 'organizationTypeName',
        },
        {
          title: '组织级别',
          align: 'center',
          dataIndex: 'organizationLevelName',
        },
        {
          title: '社团群号',
          align: 'center',
          dataIndex: 'communityNum',
        },
        {
          title: '社团证件图',
          align: 'center',
          dataIndex: 'communityPicture',
          scopedSlots: { customRender: 'piclot' }
        },
        {
          title: '状态',
          align: 'center',
          dataIndex: 'type_dictText',
        },
        {
          title: '审核',
          align: 'center',
          dataIndex: 'audit_dictText',
        },
        // {
        //   title:'社团公告',
        //   align:"center",
        //   dataIndex: 'clubAnnouncement'
        // },
        // {
        //   title:'社团创建人',
        //   align:"center",
        //   dataIndex: 'communityCreateBy'
        // },
        // {
        //   title:'社团成员数',
        //   align:"center",
        //   dataIndex: 'numOfMembers'
        // },
        // {
        //   title:'档案类型',
        //   align:"center",
        //   dataIndex: 'fileType'
        // },
        // {
        //   title:'社团等级',
        //   align:"center",
        //   dataIndex: 'level'
        // },
        // {
        //   title: '删除',
        //   align: 'center',
        //   dataIndex: 'delFlag_dictText',
        // },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          fixed: 'right',
          width: 147,
          scopedSlots: { customRender: 'action' },
        },
      ],
      url: {
        list: '/communityManagement/communityManagement/list',
        delete: '/communityManagement/communityManagement/delete',
        deleteBatch: '/communityManagement/communityManagement/deleteBatch',
        exportXlsUrl: '/communityManagement/communityManagement/exportXls',
        importExcelUrl: 'communityManagement/communityManagement/importExcel',
      },
      dictOptions: {},
    }
  },
  created() {},
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    },
  },
  methods: {
    getAvatarView: function (avatar) {
      return getFileAccessHttpUrl(avatar)
    },
    batchDels(id) {
      getAction('/communityManagement/communityManagement/deleteById', { id }).then((res) => {
        if (res.success) {
          let arr = res.result
          this.nameList_jiaohsi = arr
          this.loadData()
          this.onClearSelected()
        } else {
          this.$message.warning(res.message)
        }
      })
    },
/*    tongguo(id) {
      getAction('/communityManagement/communityManagement/examinationPassed', { id }).then((res) => {
        if (res.success) {
          let arr = res.result
          this.nameList_jiaohsi = arr
          this.loadData()
          this.onClearSelected()
        } else {
          this.$message.warning(res.message)
        }
      })
    }, */
    
    
    //审核：1待审核，2通过，3未通过
    complaintsPass(record){
      record.audit = '2';
      record.type = '2';
         //创建社团申请通过
       this.axios.post("/communityManagement/communityManagement/examinationPassed",record)
       .then((res) => {
         //alert("啦啦啦");
         this.loadData();
       })
    },
    complaintsNPass(record){
      record.audit = '3';
      //创建社团申请不通过
        this.axios.post("/communityManagement/communityManagement/examinationPassed",record)
        .then((res) => {
          //alert("啦啦啦");
          this.loadData();
        })
    },
    initDictConfig() {},
    getClubInfo(id){
         this.axios.get("/communityManagement/communityManagement/getClubInfo",{params:{id:id}}).then((res) => {
           this.clubInfo = res.result;
         });
         this.clubInfoVisible = true;
         
    },
    handleOk(e) {
      console.log(e);
      this.clubInfoVisible = false;
    }
  },
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>